<template>
    <div class="order-apply-invoice">
      <div id="lineMain2" style="width: 100%; height: 400px;"></div>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, watch,nextTick} from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
})

const linChart = ()=> {
  let option = {
    // legend: {
    //   right: '50px',
    //   top: '30px',
    //   data: ['美元', '人民币']
    // },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
  xAxis: {
    type: 'category',
    data: Array.from(props.config.xAxisData)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: Array.from(props.config.yAxisData),
      type: 'line'
    }
  ]
};
  nextTick(() => { 
    echarts.init(document.getElementById('lineMain2')).setOption(option);
  })
}

watch(() => props.config,(newVal, oldVal) =>{
  console.log("11111",props.config)
  console.log("22222",props.lineChartInfo)
  linChart()
},{deep:true})
onMounted(() => { 
  // linChart()
})  
</script>
<style lang="scss" scoped></style>